<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公司管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/company' }">我的公司</el-breadcrumb-item>
      <el-breadcrumb-item>添加公司</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 提示区 -->
      <el-alert title="添加公司" type="info" center show-icon :closable="false"></el-alert>

      <!-- 进度条 -->
      <el-steps :active="activeIndex - 0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="公司Logo"></el-step>
        <!-- <el-step title="公司图片"></el-step> -->
      </el-steps>

      <!-- Tag栏 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        label-position="top"
      >
        <el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="changeActiveIndex">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址" prop="site">
              <el-input v-model="addForm.site"></el-input>
            </el-form-item>
            <el-form-item label="所在城市" prop="city">
              <el-select v-model="addForm.city" placeholder="请选择城市">
                <el-option v-for="(item,i) in city" :key="i" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司简介" prop="brief">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                v-model="addForm.brief"
              ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="公司Logo" name="1">
            <el-upload
              action="http://gz.pwbov.cn/upload"
              :on-remove="handleRemove"
              list-type="picture"
              :on-success="handleLogoSuccess"
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
            </el-upload>
            <div class="btn" align="center">
              <el-button type="primary" @click="addCompany">创建完成</el-button>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="公司图片" name="2">
            <el-upload
              action="http://cake.pwbov.cn/upload"
              :on-remove="handleRemove"
              list-type="picture"
              :on-success="handleSuccess"
            >
              <el-button type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>-->
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      addForm: {
        briefUrlList: []
      },
      addFormRules: {
        name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        site: [{ required: true, message: '请输入活动地址', trigger: 'blur' }],
        city: [{ required: true, message: '请选择所在城市', trigger: 'blur' }],
        brief: [{ required: true, message: '请输入公司简介', trigger: 'blur' }]
      },
      city: [
        '全国',
        '北京市',
        '上海市',
        '天津市',
        '重庆市',
        '河北省',
        '山西省',
        '辽宁省',
        '吉林省',
        '黑龙江省',
        '江苏省',
        '浙江省',
        '安徽省',
        '福建省',
        '江西省',
        '山东省',
        '河南省',
        '湖北省',
        '湖南省',
        '广东省',
        '海南省',
        '四川省',
        '贵州省',
        '云南省',
        '陕西省',
        '甘肃省',
        '青海省',
        '台湾省'
      ]
    }
  },
  methods: {
    // 上传logo
    handleLogoSuccess(res) {
      this.addForm.url = res.data.url
    },
    //上传公司图片
    handleSuccess(res) {
      this.addForm.briefUrlList.push(res.data.url)
    },
    // 移除图片
    async handleRemove(file) {
      const { data: res } = await this.$http.delete(`file`, {
        params: { fileName: file.response.data.filePath }
      })
      this.addForm.url = ''
    },
    // 添加公司
    async addCompany() {
      const { data: res } = await this.$http.post(`company`, this.addForm)
      if (res.meta.status != 200) {
        return this.$message.error('添加公司失败！')
      }
      this.$message.success('添加公司成功！')
      console.log(res.data)
    },
    changeActiveIndex(activeName, oldActiveName) {
      if (oldActiveName == '0') {
        let page0 = false
        this.$refs.addFormRef.validate(valid => {
          if (!valid) {
            return this.$message.error('请填写必要的基本信息！')
          }
          page0 = true
        })
        if (page0) return true
        else return false
      }
    }
  }
}
</script>

<style>
.overBtn {
  margin: 0 auto;
  margin-top: 20px;
}
.btn {
  margin-top: 50px;
}
</style>